<template>
	<view class="goodsList">
		<!-- 自定义导航栏 -->
		<view class="navbar_color">
			<navBar>
				<view slot="center" @click="back"><text class="icon_go iconfont icon-go"></text></view>
				<view slot="right" class="store_search">
					<view class="icon_search iconfont icon-search"></view>
					<input type="text" placeholder="搜索店内商品" />
				</view>
			</navBar>
		</view>
		<!-- 商品栏 -->
		<view class="detail">
			<view class="detail_top">
				<!-- 商品，店铺 -->
				<view class="detail_top_tabs">
					<view
					class="detail_top_tabs_title"
					v-for="(v,i) in list" :key="i"
					@click="switchIndex(i)"
					:class="[clickIndex == i? 'title_active':'']"
					>{{v}}</view>
				</view>
				<!-- 筛选 -->
				<view class="detail_top_screen">
					<view class="detail_top_screen_title screen_active1" data-text="综合" @click="handerSelect">综合</view>
					<view class="detail_top_screen_title screen_active2" data-text="销量" @click="handerSelect">销量</view>
					<view class="detail_top_screen_title" @click="screen = !screen">
						<image src="@/static/mall/shaixuna.png"/>
						筛选
					</view>
				</view>
			</view>
			<!-- 全部商品 -->
			<view class="detail_bottom" v-if="hidden">
				<view class="detail_bottom_content" @click="intoDetails(v.product_id)" v-for="v in detailsArr" :key="v.product_id">
					<view class="detail_bottom_content_left">
						<image :src="v.main_imgurl" mode="" style="border-radius: 8rpx 0rpx 0rpx 8rpx;" />
					</view>
					<view class="detail_bottom_content_right">
						<view class="detail_bottom_content_right_title omit-2">{{v.product_title}}</view>
						<view class="detail_bottom_content_right_text">多功能<view class="bar"></view>环保级别</view>
						<view class="detail_bottom_content_right_price">
							<view class="detail_bottom_content_right_price_left">{{v.volume}}人付款</view>
							<view class="detail_bottom_content_right_price_right">
								<view class="detail_bottom_content_right_price_right_left">￥<text>{{v.primary_price}}</text></view>
								<view class="detail_bottom_content_right_price_right_right">￥<text>{{v.price}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 店铺 -->
			<view class="detail_shop" v-if="!hidden">
				<view class="shop_content" v-for="(v,i) in shopArr" :key="i">
					<view class="shop_content_top">
						<view class="shop_content_top_left">
							<view class="shop_content_top_left_image"></view>
							<view class="shop_content_top_left_text">
								<view class="shop_content_top_left_text_top">{{v.shopName}}</view>
								<view class="shop_content_top_left_text_bottom">{{v.shopYear}}<view class="bar"></view>{{v.shopTitle}}</view>
							</view>
						</view>
						<view class="shop_content_top_right" @click="intoStore"><image src="https://manager.ryz1620.com/static/mall/jindian.png" /></view>
					</view>
					<view class="shop_content_bottom">
						<view class="shop_content_bottom_image"></view>
						<view class="shop_content_bottom_image"></view>
						<view class="shop_content_bottom_image"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="screen" :class="{'screen_active':screen}">
			<!-- 遮罩层 -->
			<view class="screen_mask">
				<view class="dowm_screen" @click="mask"></view>
				<view class="screen_mask_content" :class="[screen?'maskUp':'maskOut']">
					<!-- 空白 -->
					<view class="screen_mask_content_blank"></view>
					<view class="screen_mask_content_box">
						<!-- 品牌 -->
						<view class="screen_mask_content_box_brand">
							<text class="brand_title">品牌</text>
							<view class="screen_mask_content_box_brand_box">
								<view class="screen_mask_content_box_brand_box_content"
								v-for="(v,i) in brandAll.slice(0,brandNum)" :key="v.store_id"
								@click="handerBrand(i)"
								>
									<view class="screen_mask_content_box_brand_box_content_box"
								:class="{'screen_active' : checkBoxAll.includes(i)}"><text>{{v.store_name}}</text></view>
								</view>
								<view class="last_title" @click="brands" v-if="brandTitle && brandAll.length >= 6">更多品牌<text class="last_icon iconfont icon-go"></text></view>
								<view class="last_title" @click="brands" v-if="!brandTitle">收起<text class="last_icon active iconfont icon-go"></text></view>
							</view>
						</view>
						<!-- 品类 -->
						<view class="screen_mask_content_box_category">
							<text class="category_title">品类</text>
							<view class="screen_mask_content_box_category_box">
								<view class="screen_mask_content_box_category_box_content"
								v-for="(v,i) in categoryAll.slice(0,cateNum)" :key="v.cate_id"
								@click="handerCategory(i)"
								>
									<view class="screen_mask_content_box_category_box_content_box"
								:class="{'caregory_active' : checkBoxAlls.includes(i)}"><text>{{v.cate_name}}</text></view>
								</view>
								<view class="last_title" @click="cateGorys" v-if="cateTitle && categoryAll.length >= 6">更多品类<text class="last_icon iconfont icon-go"></text></view>
								<view class="last_title" @click="cateGorys" v-if="!cateTitle">收起<text class="last_icon active iconfont icon-go"></text></view>
							</view>
						</view>
						<!-- 价格 -->
						<view class="screen_mask_content_box_price">
							<text class="price_title">价格区间（元）</text>
							<view class="screen_mask_content_box_price_input">
								<input type="number" v-model="minVal" placeholder="最低价" cursor-spacing="30" />
								<text> - </text>
								<input type="number" v-model="maxVal" placeholder="最高价" cursor-spacing="30" />
							</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="screen_mask_content_btn"  :class="[screen?'maskUp':'maskOut']">
						<!-- 重置 -->
						<view class="reset_btn btn" @click="reset">重置</view>
						<!-- 确认 -->
						<view class="confirm_btn btn" @click="handerOk">确认</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入组件
	import navBar from "@/components/navBar/navBar.vue" //签约页面
	import service_mall from '@/service/mall.js';		// 请求页
	
	export default {
		data() {
			return {
				list:['全部','店铺'],
				clickIndex:0,			// 全部，店铺的切换
				hidden:true,			// 店铺列表的显示与隐藏
				minVal:'',				// 最小金额
				maxVal:'',				// 最大金额
				screen:false,			// 筛选
				brandNum:5,				// 品牌数量
				cateNum:5,				// 品类数量
				brandTitle:true,		// 更多品牌
				cateTitle:true,			// 更多品类
				checkBoxAll:[],			// 选中的品牌
				checkBoxAlls:[],		// 选中的品类
				selectAll:[],			// 存放选中的品牌id
				selectAlls:[],			// 存放选中的品类id
				salesAll:['全部','从高到低','从低到高'],		// 销量筛选
				brandAll:[],			// 品牌数据
				categoryAll:[],			// 品类数据
				detailsArr:[],			// 商品数据
				shopArr:[				// 店铺数据
					{shopName:'友家柜类定制',shopYear:'9年老店',shopTitle:'支持配送'},
					{shopName:'友家柜类定制',shopYear:'9年老店',shopTitle:'支持配送'},
					{shopName:'友家柜类定制',shopYear:'9年老店',shopTitle:'支持配送'},
					{shopName:'友家柜类定制',shopYear:'9年老店',shopTitle:'支持配送'},
					{shopName:'友家柜类定制',shopYear:'9年老店',shopTitle:'支持配送'}
				]
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			options.id = 1;
			this.storeId = options.id;
			
			this.getGoodsList();
			this.getScreen();
		},
		methods: {
			// 跳转到上一页
			back(){
				uni.navigateBack({
					delta:1,
				})
			},
			// 跳转到店铺
			intoStore(){
				uni.navigateTo({
					url:'/pages_mall/pages/mall/store/store',
				})
			},
			switchIndex(v) {
				this.clickIndex = v;
				if(this.clickIndex == 0){
					this.hidden = true;
					this.selectScreen = false;
				}else {
					this.hidden = false;
					this.selectScreen = false;
				}
			},
			// 获取商品列表
			getGoodsList() {
				let storeId = this.storeId;
				// 临时加载动画
				uni.showLoading({ title: '加载中', mask: true })
				service_mall.goods_getList({ store_id: storeId, order_type: '', keyword: '' })
					.then(res => {
						if(res.code == 1) {
							this.detailsArr = res.data.data
							uni.hideLoading()
						}else {
							uni.hideLoading()
							this.$utils.showErr()
						}
					})
					.catch(req => {
						uni.hideLoading()
						this.$utils.showErr()
					})
			},
			// 销量
			handerSelect(e){
				let data = e.target.dataset.text;
				let orderType = '';
				if(data == '综合') {
					orderType = 'mix';
				}else if(data == '销量') {
					orderType = 'sale';
				}
				// 临时加载动画
				uni.showLoading({ title: '加载中', mask: true })
				service_mall.goods_getList({ order_type: orderType, keyword: '' })
					.then(res => {
						if(res.code == 1) {
							this.detailsArr = res.data.data
							uni.hideLoading()
						}else {
							uni.hideLoading()
							this.$utils.showErr()
						}
					})
					.catch(req => {
						uni.hideLoading()
						this.$utils.showErr()
					})
			},
			// 获取筛选数据
			getScreen() {
				service_mall.goods_getScreen()
				.then(res => {
					console.log(res);
					if(res.code == 1) {
						this.brandAll = res.data.LstStore;
						this.categoryAll = res.data.LstCate;
					}
				})
			},
			// 展开收起品牌数据
			brands(){
				if(this.brandNum == 5) {
					this.brandNum = 100;
					this.brandTitle = false;
				}else {
					this.brandNum = 5;
					this.brandTitle = true;
				}
			},
			// 选中的品牌
			handerBrand(i){
				let arr = this.checkBoxAll;
				if(arr.includes(i)) {
					let index = arr.indexOf(i)
					if(index > -1) {
						arr.splice(index,1);
						this.selectAll.splice(index,1);
					}
				}else {
					this.checkBoxAll.push(i);
					this.selectAll.push(this.brandAll[i].store_id)
				}
			},
			// 展开收起品类数据
			cateGorys(){
				if(this.cateNum == 5) {
					this.cateNum = 100;
					this.cateTitle = false;
				}else {
					this.cateNum = 5;
					this.cateTitle = true;
				}
			},
			// 选中的品类样式
			handerCategory(i){
				let arr = this.checkBoxAlls;
				if(arr.includes(i)) {
					let index = arr.indexOf(i)
					if(index > -1) {
						arr.splice(index,1);
						this.selectAlls.splice(index,1);
					}
				}else {
					this.checkBoxAlls.push(i);
					this.selectAlls.push(this.categoryAll[i].cate_id);
				}
			},
			// 退出时重置品牌，品类数据数量
			mask(){
				this.screen = !this.screen;
				this.brandNum = 5;
				this.brandTitle = true;
				this.cateNum = 5;
				this.cateTitle = true;
				this.checkBoxAll = [];
				this.checkBoxAlls = [];
				this.selectAll = [];
				this.selectAlls = [];
			},
			// 跳转到商品详情
			intoDetails(productId){
				uni.navigateTo({
					url:`/pages_mall/pages/mall/goods_details/goods_details?id=${productId}`,
				})
			},
			// 重置
			reset(){
				this.checkBoxAll = [];
				this.checkBoxAlls = [];
				this.minVal = '';
				this.maxVal = '';
				this.selectAll = [];
				this.selectAlls = [];
			},
			// 确认
			handerOk(){
				this.screen = !this.screen;
				this.checkBoxAll = [];
				this.checkBoxAlls = [];
				this.minVal = '';
				this.maxVal = '';
			}
		},
		components: {
			navBar,
		},
	}
</script>

<style lang="scss" scoped>
	// 重置样式
	page {color: #333;font-size: 28rpx;}
	image {width: 100%;height: 100%;display: block;}
	// placeholder问题
	
	.goodsList {
		height: 100vh;
		display: flex;
		flex-flow: column;
		
		// 自定义导航栏
		.navbar_color {
			width: 100%;
			height: 680rpx;
			background: linear-gradient(90deg, #2E333F 0%, #191D29 100%);
		}
		
		/deep/.N_inner {
			background: transparent !important;
		}
		/deep/.N_iCen {
			position: relative;
		}
		/deep/.N_iCenter {
			justify-content: flex-start;
			flex: none;
			width: 50rpx;
			height: 88rpx;
			padding-left: 36rpx;
		}
		/deep/.N_iRight {
			position: absolute;
			left: 94rpx;
			top: 20rpx;
		}
		.icon_go {
			color: #fff;
		}
		
		.store_search {
			width: 434rpx;
			height: 62rpx;
			background: rgba(255, 255, 255, 0.23);
			border: 2rpx solid #fff;
			border-radius: 34rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			
			.icon_search {
				color: #fff;
				position: absolute;
				left: 32rpx;
				top: 16rpx;
			}
			
			input {
				font-size: 24rpx;
				color: #FFFFFF;
				opacity: 0.8;
			}
		}
		
		// 商品栏
		.detail {
			width: 100%;
			height: 1406rpx;
			border-radius: 24rpx 24rpx 0 0;
			background-color: #F6F7FB;
			position: fixed;
			top: 180rpx;
			left: 0rpx;
			
			&_top {
				width: 100%;
				height: 178rpx;
				border-bottom: 1rpx solid rgba($color: #000000, $alpha: 0.08);
				position: relative;
				
				&_tabs {
					width: 100%;
					height: 84rpx;
					border-radius: 24rpx 24rpx 0 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					&_title {
						flex: 1;
						height: 100%;
						line-height: 84rpx;
						text-align: center;
						font-size: 32rpx;
						color: #333333;
					}
					
					.title_active {
						font-weight: 600;
						position: relative;
						
						&::after {
							content: '';
							display: block;
							width: 40rpx;
							height: 8rpx;
							border-radius: 4rpx 4rpx 0 0;
							background: #FFD425;
							position: absolute;
							bottom: 0rpx;
							left: 166rpx;
						}
					}
				}
				
				&_screen {
					width: 100%;
					height: 94rpx;
					background: #fff;
					display: flex;
					
					&_title {
						flex: 1;
						height: 100%;
						text-align: center;
						line-height: 94rpx;
						
						&:last-child {
							display: flex;
							justify-content: center;
							align-items: center;
						}
						
						image {
							width: 34rpx;
							height: 26rpx;
						}
					}
					
					.screen_active1 {
						position: relative;
						
						&::after {
							content: '';
							display: inline-block;
							width: 0rpx;
							height: 0rpx;
							border-top: 8rpx solid #000;
							border-right: 8rpx solid transparent;
							border-bottom: 8rpx solid transparent;
							border-left: 8rpx solid transparent;
							position: absolute;
							right: 76rpx;
							top: 44rpx;
						}
					}
					.screen_active2 {
						position: relative;
						
						&::after {
							content: '';
							width: 0rpx;
							height: 20rpx;
							border: 2rpx solid rgba($color: #000000, $alpha: 0.08);
							position: absolute;
							top: 36rpx;
							right: 0rpx;
						}
					}
				}
			
			}
		
			// 全部商品
			&_bottom {
				width: 100%;
				height: 74vh;
				overflow: auto;
				
				&_content {
					height: 212rpx;
					margin: 32rpx 32rpx 0rpx;
					background: #fff;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					
					&_left {
						width: 212rpx;
						height: 212rpx;
						background: skyblue;
						border-radius: 8rpx 0rpx 0rpx 8rpx;
					}
					
					&_right {
						flex: 1;
						padding: 26rpx 26rpx 18rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						&_title {
							font-size: 28rpx;
							color: #333333;
						}
						
						&_text {
							display: flex;
							align-items: center;
							font-size: 22rpx;
							color: #939393;
							
							.bar {
								width: 0rpx;
								height: 12rpx;
								border: 1rpx solid rgba($color: #939393, $alpha: 0.6);
								margin: 0 10rpx;
							}
						}
						
						&_price {
							display: flex;
							justify-content: space-between;
							align-items: flex-end;
							
							&_left {
								font-size: 22rpx;
								color: #939393;
							}
							
							&_right {
								display: flex;
								justify-content: space-between;
								align-items: flex-end;
								
								&_left {
									font-size: 14rpx;
									color: #939393;
									
									text {
										font-size: 18rpx;
									}
								}
								
								&_right {
									font-size: 24rpx;
									color: #E9423E;
									line-height: 30rpx;
									
									text {
										font-size: 32rpx;
									}
								}
							}
						}
					}
					
					&:last-child {
						margin-bottom: 32rpx;
					}
				}
			}
		
			// 店铺
			&_shop {
				width: 100%;
				height: 74vh;
				overflow: auto;
				
				.shop_content {
					height: 344rpx;
					margin: 32rpx 32rpx 0rpx;
					padding: 26rpx 24rpx 24rpx;
					background: #fff;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					
					&_top {
						height: 70rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						&_left {
							height: 70rpx;
							display: flex;
							align-items: center;
							
							&_image {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								background: #ccc;
							}
							
							&_text {
								margin-left: 16rpx;
								
								&_top {
									font-size: 28rpx;
									color: #333333;
								}
								
								&_bottom {
									font-size: 20rpx;
									color: #939393;
									display: flex;
									align-items: center;
									
									.bar {
										width: 0rpx;
										height: 12rpx;
										border: 1rpx solid rgba($color: #939393, $alpha: 0.6);
										margin: 0 10rpx;
									}
								}
							}
						}
						
						&_right {
							width: 122rpx;
							height: 44rpx;
						}
					}
					
					&_bottom {
						display: flex;
						justify-content: space-between;
						
						&_image {
							width: 196rpx;
							height: 196rpx;
							border-radius: 8rpx;
							background: skyblue;
						}
					}
					
					&:last-child {
						margin-bottom: 32rpx;
					}
				}
			}
		}
		// 筛选
		.screen {
			width: 100vw;
			height: 100vh;
			float: right;
			z-index: 1001;
			position: fixed;
			top: 0;
			left: 0;
			visibility: hidden;
			transition: visibility .3s;
			background: rgba($color: #000000, $alpha: 0.8);
			
			&_mask {
				width: 100%;
				height: 100%;
				display: flex;
				
				.dowm_screen {
					flex: 1;
				}
				
				&_content {
					width: 612rpx;
					height: 100%;
					background: #fff;
					position: fixed;
					right: -100%;
					top: 0;
					z-index: 500;
					overflow: auto;
					
					// 空白
					&_blank {
						width: 100%;
						height: 176rpx;
						background-color: #fff;
					}
					
					&_box {
						height: 82vh;
						overflow: auto;
						
						
						
						// 品牌
						&_brand {
							width: 100%;
							margin-top: 36rpx;
							
							.screen_active {
								background-color: #C3AB7C;
								
								text {
									color: #fff;
								}
							}
							
							.brand_title {
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #333333;
								margin-left: 20rpx;
							}
							
							&_box {
								display: flex;
								flex-wrap: wrap;
								
								&_content {
									
									&_box {
										width: 170rpx;
										height: 76rpx;
										border: 2rpx solid #E5DECA;
										display: flex;
										justify-content: center;
										align-items: center;
										margin: 20rpx 0 0 20rpx;
										background-color: #fff;
										border-radius: 4rpx;
										
										text {
											text-align: center;
											font-size: 22rpx;
											font-weight: 400;
											line-height: 32rpx;
											color: #333333;
										}
									}
								}
							}
						}
										
						// 品类
						&_category {
							margin-top: 64rpx;
							
							.caregory_active {
								background-color: #C3AB7C;
								
								text {
									color: #fff;
								}
							}
							.category_title {
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #333333;
								margin-left: 20rpx;
							}
							
							&_box {
								display: flex;
								flex-wrap: wrap;
								
								&_content {
									
									&_box {
										width: 170rpx;
										height: 76rpx;
										border: 2rpx solid #E5DECA;
										display: flex;
										justify-content: center;
										align-items: center;
										margin: 20rpx 0 0 20rpx;
										background-color: #fff;
										border-radius: 4rpx;
										
										text {
											font-size: 22rpx;
											font-weight: 400;
											line-height: 32rpx;
											color: #333333;
										}
									}
								}
							}
						}
						
						
						.last_title {
							width: 170rpx;
							height: 76rpx;
							font-size: 22rpx;
							font-weight: 400;
							line-height: 32rpx;
							color: #333333;
							display: flex;
							justify-content: center;
							align-items: center;
							margin: 20rpx 0 0 20rpx;
							position: relative;
							
							.last_icon {
								font-size: 24rpx;
								color: #333;
								transform: rotate(180deg);
								position: absolute;
								right: 18rpx;
								top: 22rpx;
							}
						}
						
						.active {
							transform: rotate(90deg) !important;
							right: 30rpx !important;
							top: 26rpx !important;
						}
										
						// 价格区间
						&_price {
							margin-top: 64rpx;
							padding-bottom: 60rpx;
							
							.price_title {
								font-size: 28rpx;
								font-weight: 500;
								line-height: 40rpx;
								color: #333333;
								margin-left: 20rpx;
							}
							
							&_input {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin: 20rpx 32rpx 0;
								
								input {
									width: 244rpx;
									height: 66rpx;
									text-align: center;
									line-height: 66rpx;
									background-color: #F6F7FB;
									font-size: 22rpx;
									font-weight: 400;
									line-height: 24rpx;
									color: #939393;
									border-radius: 4rpx;
								}
							}
						}
					}
				
					// 按钮
					&_btn {
						width: 612rpx;
						height: 6vh;
						float: right;
						border-top: 2rpx solid #F8F6F3;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 32rpx;
						box-sizing: border-box;
						position: fixed;
						right: 0rpx;
						bottom: 0rpx;
						background-color: #fff;
						
						.btn {
							width: 258rpx;
							height: 4vh;
							border-radius: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
						}
						
						.reset_btn {
							border: 2rpx solid #C2AB7B;
							color: #C3AB7C;
							background-color: #fff;
						}
						
						.confirm_btn {
							color: #fff;
							border: 2rpx solid #C2AB7B;
							background-color: #C2AB7B;
						}
					}
				}
			}
			.maskUp {
				animation: popFocusIn .3s linear forwards;
			}
			.maskOut {
				animation: popFocusOut .3s linear forwards;
			}
		}
		.screen_active {
			visibility: visible;
			
			.screen_mask {
				animation: colorMove .3s linear forwards;
			}
		}
	}
	@keyframes popFocusIn {
		from {
			right: -100%;
		}
		to {
			right: 0rpx;
		}
	}
	@keyframes popFocusOut {
		from {
			right: 0rpx;
		}
		to {
			right: -100%;
		}
	}
	@keyframes colorMove {
		from {
			background-color: rgba($color: #000000, $alpha: 0);
		}
		to {
			background-color: rgba($color: #000000, $alpha: 0);
		}
	}
	@keyframes colorsMove {
		from {
			background-color: rgba($color: #000000, $alpha: 0);
		}
		to {
			background-color: rgba($color: #000000, $alpha: 0.6);
		}
	}
</style>
